<template>
	<view class="experts">
		<view class="search">
			<input type="text" placeholder="姓名/称谓" v-model="realName" @input="getList"> 
			<image src="@/static/img/member/search.png"></image>
		</view>
		<view class="uni-list">
			<checkbox-group @change="checkboxChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in list" :key="index">
					<view class="checkboxExperts">
						<checkbox :value="item.id+''" :checked="item.checked" color="#38CB97" :disabled="item.disabled" style="transform: scale(.7);border-radius: 50%;"/>
						<image mode="aspectFill" :src="item.headPicture ? item.headPicture : '/static/img/defalut.png'" class="image"></image>
						<view class="content"><text>{{item.expertName}}</text><text>{{item.appellations}}</text></view>
					</view>
				</label>
			</checkbox-group>
		</view>
		<view class="footer">
			<view class="headPortait" v-for="(item,index) in checkedArr" :key="index">
				<image mode="aspectFill" :src="item.headPicture ? item.headPicture : '/static/img/defalut.png'"></image>
			</view>
			<text class="preserve save" v-if="checkedArr.length <= 0" @click="bindClick">暂不选择</text>
			<text class="preserve" v-if="checkedArr && checkedArr.length > 0" @click="save">保存({{checkedArr.length}})</text>
		</view>
	</view>
</template>

<script>
	import {
		getUrlParam
	} from "@/static/js/filter.js"
	export default {
	    data() {
	        return {
				list: [],
	            current: 0,
				checkedArr:[],
				realName: ''
	        }
	    },
		created() {
			this.getList()
		},
	    methods: {
			getList() {
				this.$api.speciaList({pageIndex:1,pageSize:20,appellations:null,realName:this.realName}).then((res) => {
					this.list = res.data.result.list;
					const expertNoArr = JSON.parse(decodeURI(getUrlParam('expertNoArr'))) ? JSON.parse(decodeURI(getUrlParam('expertNoArr'))) : '';
					res.data.result && res.data.result.list.map((a)=>{
						if(expertNoArr.length >= 10){
							a.disabled = true
						}
						if(expertNoArr.indexOf(a.expertNo) > -1){
							console.log(a)
							a.checked = true
							a.disabled = false
							this.checkedArr.push(a)
						}else{
							a.checked = false
						}
					})
				});
			},
	        checkboxChange (e) {
				this.checkedArr = [];
				if(e.detail.value.length >= 10) {
					uni.showToast({title: '最多只能选择10个',icon:'none'});
					this.list && this.list.map((res) => {
						if(e.detail.value.length >= 10) {
							res.disabled = true
						}
						e.detail.value.map((a,ai)=>{
							if (res.id == a) {	
								res.disabled = false
								this.checkedArr.push(res);
							}
						})
					})
				}else{
					this.list && this.list.map((res) => {
						e.detail.value.map((a,ai)=>{
							if (res.id == a) {	
								res.disabled = false
								this.checkedArr.push(res);
							}
						})
					})
				}
			},
			save() {
				this.$api.bdExpert({userId:getUrlParam('userId'),expertList:this.checkedArr}).then((res) => {
					if(res.data.returnCode == '200') {
						uni.showToast({title: '添加成功',icon:'none'});
						uni.navigateTo({
							url:'/pages/headFeatures/member/myMember'
						})
					}
				})
			
			},
			bindClick() {
				const _this = this;
				uni.showModal({
					title: '提示',
					content: '暂不选择，会员将得不到专家服务',
					success: function(res) {
						if (res.confirm) {
							_this.$api.bdExpert({userId:getUrlParam('userId'),expertList:[]}).then((res) => {
								if (res.data.returnCode == '200') {
									uni.showToast({title: '添加成功',icon:'none'});
									uni.navigateTo({
										url:'/pages/headFeatures/member/myMember'
									})
								}
							})
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					}
				});
			},
	    },
		
	}

</script>

<style lang="scss" scoped>
	.experts {
		min-width: 100vw;
		min-height: 100vh;
		background: #FFFFFF;
		overflow: hidden;
		.search {
			display: flex;
			align-items: center;
			height: 110upx;
			border-bottom: 1px solid #E3E3E3;
			position: fixed;
			top: 44px;
			left: 0;
			width: 100%;
			z-index: 100;
			background: #fff;
			image {
				position: absolute;
				left: 24upx;
				top: 50%;
				transform: translateY(-50%);
				width: 40upx;
				height: 40upx;
			}
			input {
				font-size: 28upx;
				padding-left: 79upx;
			}
		}
		.uni-list {
			margin-top: 134upx;
		}
		.checkboxExperts {
			display: flex;
			align-items: center;
			margin: 0 3%;
			.image {
				width: 76upx;
				height: 76upx;
				margin: 0 26upx;
				border-radius: 10upx;
			}
			.content {				
				border-bottom: 1px solid #eeeeee;
				flex: 1;
				padding: 48upx 0;
				display: flex;
				text {
					color: #232323;
					font-size: 30upx;					
				}
				text:nth-child(odd) {
					width: 120upx;
					margin-right: 16upx;
				}
			}
		}
		.footer {
			background-color: #F6f6f6;
			padding: 34upx 24upx;
			box-sizing: border-box;
			width: 750upx;
			overflow: hidden;
			position: fixed;
			bottom: 0;
			left: 0;
			height: 124upx;
			.headPortait {
				float: left;
				image {
					width: 68upx;
					height: 68upx;
					margin-right: 16upx;
					border-radius: 10upx;
				}
			}
			.save,
			.preserve{
				background-color: #EBEBEB;
				color: #c2c2c2;
				width: 124upx;
				height: 58upx;
				text-align: center;
				line-height: 58upx;
				display: inline-block;
				border-radius: 8upx;
				float: right;
			}
			.preserve {
				background-color: #38CB97;
				color: #FFFFFF;
			}
			.save {width: 160upx;}
		}
		
	}		
	.experts .search uni-input{
		width: 100%;
	}
	
	/depp/ uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
		border-color: #38CB97 !important;
	}
</style>
